<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>影像综合诊断系统</title>
	<link rel="shortcut icon" href="./static/image/favicon.ico">
	<link rel="stylesheet" type="text/css" href="./static/libs/element-ui/index.css">
	<link rel="stylesheet" type="text/css" href="./static/css/public.css">
	<link rel="stylesheet" type="text/css" href="./static/css/m_tailwind.css">
	<link rel="stylesheet" type="text/css" href="./static/css/index.css">
</head>
<body>

	<div id="app" v-cloak>
		<m-layout>
			<div class="index-wp">
				<el-form class="t-form" :inline="true" :model="form">
				  <el-form-item class="mr-20" label="ID：">
				    <el-input style="width: 150px;" v-model="form.cardID" placeholder="请输入ID" clearable></el-input>
				  </el-form-item>
				  <el-form-item class="mr-20" label="姓名：">
				    <el-input style="width: 150px;" v-model="form.name" placeholder="请输入姓名" clearable></el-input>
				  </el-form-item>
				  <!-- <el-form-item class="mr-20" label="性别：">
				    <el-radio-group v-model="form.gender">
				    	<el-radio style="margin-right:10px;" label="">全部</el-radio>
					    <el-radio style="margin-right:10px;" :label="1">男</el-radio>
					    <el-radio style="margin-right:10px;" :label="2">女</el-radio>
					  </el-radio-group>
				  </el-form-item> -->
				  <el-form-item class="mr-20" label="最后检查时间：">
				  	<el-date-picker style="width: 260px;"
				      v-model="form.time"
				      type="daterange"
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期"
				      value-format="yyyy-MM-dd">
				    </el-date-picker>
				  </el-form-item>
				  <el-form-item class="mr-40" label="收藏：">
				    <el-radio-group v-model="form.is_collect" class="collect-radio">
					    <el-radio label="">全部</el-radio>
					    <el-radio :label="1">已收藏</el-radio>
					  </el-radio-group>
				  </el-form-item>
				  <el-form-item>
				    <el-button type="primary" @click="searchPage">查询</el-button>
				    <el-button @click="showAddPatient()">新增</el-button>
				  </el-form-item>
				</el-form>
				<div class="table-box">
					<div class="flex-1 h-0" 
						v-loading="table.loading"
						element-loading-text="数据加载中"
				    element-loading-spinner="el-icon-loading"
				    element-loading-background="rgba(0, 0, 0, 0.8)">
		        <el-table 
		        	ref="list"
		        	class="block-table"
		          :data="table.data"
		          @expand-change="expandChange"
		          @row-click="rowClick"
		          style="width: 100%"
		          height="100%"
		          @selection-change="handleSelectionChange">
		          <el-table-column type="selection" align="center" width="55"></el-table-column>
		          <el-table-column type="expand">
		          	<template slot-scope="scope">
		          		<el-table
		          			class="history-table block-table" 
						        :data="scope.row.children"
						        border
						        style="width: 100%">
						        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
						        <el-table-column prop="diagnosisTime" label="检查时间" width="300" align="center">
						        	<template slot-scope="scope">
						        		<div class="relative" style="display: inline-block;">
						        			<span>{{switchTime(scope.row.diagnosisTime, 'yyyy-MM-dd&nbsp;&nbsp;HH:mm:ss')}}</span>
					          			<svg v-if="scope.row.hasVideo" style="position:absolute;top:2px;right:-30px;width:20px;height:20px;" viewBox="0 0 1024 1024"><path d="M960 192h-28.384c-16.8 0-32.928 6.624-44.928 18.432L800 295.936V256a96 96 0 0 0-96-96H96C43.072 160 0 203.04 0 256v512a96 96 0 0 0 96 96h608c52.992 0 96-43.008 96-96v-39.072l86.688 85.504c12 11.808 28.128 18.432 44.928 18.432H960a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64zM96 800c-17.664 0-32-14.368-32-32V256a32 32 0 0 1 32-32h608c17.632 0 32 14.336 32 32v512c0 17.632-14.368 32-32 32H96z m864-31.136h-32l-128-128V640l-32-32v-192l160-160h32v512.864z"></path></svg>
					          		</div>
						        	</template>
						        </el-table-column>
						        <el-table-column prop="diagnosisAge" width="250" label="检查时年龄" align="center"></el-table-column>
						        <el-table-column prop="diagnosisResult" label="诊断结果" align="center"></el-table-column>
						        <el-table-column label="操作" width="300" align="center">
						          <template slot-scope="scope2">
						          	<el-link class="text-16 mx-5" type="primary" @click="showVideoRecord(scope2.row.patientId, scope2.row.name, scope2.row.id)">详情</el-link>
						          	<el-link v-if="scope2.row.report" class="text-16 mx-5" type="primary" @click="showReport(scope2.row.report)">查看报告</el-link>
						          	<el-link class="text-16 mx-5" type="primary" @click="clickUploadReport(scope.row, scope2.row)">上传报告</el-link>
						          </template>
						        </el-table-column>
						      </el-table>
		          	</template>
		          </el-table-column>
		          <el-table-column label="序号" prop="sort" width="120"></el-table-column>
		          <el-table-column v-for="(item, index) in table.head" :key="index" :prop="item.key" :label="item.label" :width="item.width" :min-width="item.minWidth"></el-table-column>
		          <el-table-column prop="lastDiagnosisTime" label="最近就诊时间" min-width="22%">
		          	<template slot-scope="scope">
		          		{{switchTime(scope.row.lastDiagnosisTime, 'yyyy-MM-dd&nbsp;&nbsp;HH:mm:ss')}}
		          	</template>
		          </el-table-column>
		          <el-table-column prop="diagnosisNumber" label="检查次数" min-width="16%">
		          	<template slot-scope="scope">
		          		<div class="flex items-center">
		          			<span style="min-width:22px;">{{scope.row.diagnosisNumber}}</span>
		          			<svg v-if="scope.row.hasVideo" style="width:20px;height:20px;margin-left: 10px;" viewBox="0 0 1024 1024"><path d="M960 192h-28.384c-16.8 0-32.928 6.624-44.928 18.432L800 295.936V256a96 96 0 0 0-96-96H96C43.072 160 0 203.04 0 256v512a96 96 0 0 0 96 96h608c52.992 0 96-43.008 96-96v-39.072l86.688 85.504c12 11.808 28.128 18.432 44.928 18.432H960a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64zM96 800c-17.664 0-32-14.368-32-32V256a32 32 0 0 1 32-32h608c17.632 0 32 14.336 32 32v512c0 17.632-14.368 32-32 32H96z m864-31.136h-32l-128-128V640l-32-32v-192l160-160h32v512.864z"></path></svg>
		          		</div>
		          	</template>
		          </el-table-column>
		          <el-table-column label="操作" width="130">
		            <template slot-scope="scope">
		            	<el-link class="text-16" type="primary" @click.stop="showVideoRecord(scope.row.id, scope.row.name)"><b>进入检查</b></el-link>
		            </template>
		          </el-table-column>
		          <el-table-column label="收藏" width="120">
		          	<template slot-scope="scope">
		          		<m-checkbox v-model="scope.row.is_collect" 
		              	size="24"
		              	:true-label="1" 
		              	:false-label="0"
		              	type="collect"
		              	@change="changeCollect(scope.row)"/>
		          	</template>
		          </el-table-column>
		        </el-table>
		      </div>
		      <div class="flex justify-between pt-10 px-20">
		      	<div>
		      		<el-button icon="el-icon-download" size="small" @click="exportResult()">导出检查信息</el-button>
		      		<el-button icon="el-icon-upload2" size="small" @click="showUploadResult()">导入检查信息</el-button>
		      	</div>
	        	<el-pagination
		          @size-change="handleSizeChange1"
		          @current-change="handleCurrentChange1"
		          :current-page="paging.current"
		          :page-sizes="[10, 50, 100, 200, 300, 400]"
		          :page-size="paging.pageSize"
		          layout="total, sizes, prev, pager, next, jumper"
		          :total="paging.total">
		        </el-pagination>
		      </div>
				</div>
			</div>
		</m-layout>


		<el-dialog
			class="history-dialog-wp"
		  :title="historyDialog.title"
		  :visible.sync="historyDialog.visible"
		  width="1000px"
		  :close-on-click-modal="false">
		  <el-table 
        :data="historyDialog.tableData"
        border
        style="width: 100%">
        <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
        <el-table-column prop="diagnosisTime" label="检查时间" width="200"></el-table-column>
        <el-table-column prop="diagnosisResult" label="诊断结果"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
          	<el-link type="primary" @click="showVideoRecord(scope.row.patientId, scope.row.name, scope.row.id)">实时影像</el-link>
          </template>
        </el-table-column>
      </el-table>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="historyDialog.visible = false">取 消</el-button>
		    <el-button type="primary" @click="historyDialog.visible = false">确 定</el-button>
		  </span>
		</el-dialog>

		<el-dialog
			class="add-patient-dialog-wp"
		  title="新增"
		  :visible.sync="addPatientDialog.visible"
		  width="600px"
		 	:close-on-click-modal="false">
		  <el-form class="pr-20" :model="addPatientDialog.form" :rules="addPatientDialog.rules" ref="addPatientDialogForm" label-width="6em">
			  <el-form-item class="mb-30" label="ID" prop="cardID">
			    <el-input v-model="addPatientDialog.form.cardID" placeholder="请输入" @change="checkId()"></el-input>
			    <div v-if="addPatientDialog.showIdTip" class="relative">
			    	<div class="id-tip text-14">ID已存在，<el-link class="btn text-14" type="primary" @click="searchById()">查看</el-link></div>
			    </div>
			  </el-form-item>
			  <el-form-item class="mb-30" label="姓名" prop="name">
			    <el-input v-model="addPatientDialog.form.name" placeholder="请输入"></el-input>
			  </el-form-item>
			  <el-form-item class="mb-30" label="性别" prop="gender">
			    <el-radio-group v-model="addPatientDialog.form.gender">
				    <el-radio :label="1">男</el-radio>
				    <el-radio :label="2">女</el-radio>
				  </el-radio-group>
			  </el-form-item>
			  <el-form-item class="mb-30" label="出生年月" prop="birthday">
			  	<div class="flex items-center">
			  		<el-input style="width: 120px;" v-model="addPatientDialog.form.year" placeholder="请输入" @change="changeYear"></el-input>
			  		<span class="mx-10">年</span>
			  		<el-input style="width: 120px;" v-model="addPatientDialog.form.month" placeholder="请输入" @change="changeMonth"></el-input>
			  		<span class="mx-10">月</span>
			  		<!-- <el-select class="mr-10" style="width: 150px;" v-model="addPatientDialog.form.year" filterable placeholder="请选择">
					    <el-option
					      v-for="item in addPatientDialog.yearList"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
					  <el-select style="width: 150px;" v-model="addPatientDialog.form.month" filterable placeholder="请选择">
					    <el-option
					      v-for="item in addPatientDialog.monthList"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select> -->
			  	</div>
			  </el-form-item>
			  <el-form-item class="mb-30" label="单位" prop="department">
			    <el-input v-model="addPatientDialog.form.department" placeholder="请输入"></el-input>
			  </el-form-item>
			  <el-form-item class="mb-30" label="军衔" prop="military">
			    <el-input v-model="addPatientDialog.form.military" placeholder="请输入"></el-input>
			  </el-form-item>
			</el-form>
			<div class="text-16" style="padding-left:85px;">(<span style="color:red;">*</span>为必填项)</div>
			<div class="text-16" style="padding-top: 20px;padding-left:45px;">
				<span class="link-btn" @click="showUploadHz()">批量导入人员信息</span>
				<a class="link-btn danger" :href="BASE_API+'/static/人员信息表-模版.xlsx'" target="_blank">（下载人员信息模板）</a>
			</div>
		  <span slot="footer" class="dialog-footer pr-20">
		    <el-button @click="addPatientDialog.visible = false">取 消</el-button>
		    <el-button type="primary" @click="addPatientSubmit()">确 定</el-button>
		  </span>
		</el-dialog>

		<el-dialog
		  title="导入文件列表"
		  :visible.sync="uploadRecord.visible"
		  width="600px"
		  :close-on-click-modal="false">
		  <div class="pb-20" style="min-height: 400px;">
		  	<el-table 
	        :data="uploadRecord.tableData"
	        border
	        style="width: 100%">
	        <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
	        <el-table-column prop="name" label="文件名"></el-table-column>
	        <el-table-column label="操作" width="150">
	          <template slot-scope="scope">
	          	<el-link type="primary" @click="confirmUploadRecord(scope.row)">选择</el-link>
	          </template>
	        </el-table-column>
	      </el-table>
		  </div>
		</el-dialog>


		<!-- 上传报告文件框 -->
		<input v-show="false" ref="reportRef" type="file" accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" @change="uploadReportFile">

		<!-- 上传报告文件框 -->
		<input v-show="false" ref="hzRef" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" @change="uploadHzFile">
	</div>

	<script src="./static/libs/vue2.6.8/vue.min.js"></script>
	<script src="./static/libs/element-ui/index.js"></script>
	<script src="./static/libs/axios.min.js"></script>
	<script src="./static/js/Tools.js"></script>
	<script src="./static/components/common.js"></script>
	<script src="./config/config.js"></script>
	<script src="./static/js/index.js"></script>
</body>
</html>